<template>
  <a-form ref="form" layout="inline" :model="formData">
    <!--    <a-form-item>
      <yard-selector v-model="formData.yard_id" />
    </a-form-item>-->
    <a-form-item>
      <a-input v-model:value="formData.name" placeholder="请输入姓名" style="width: 160px" allowClear />
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="formData.identity_num" placeholder="请输入身份证号" style="width: 160px" allowClear />
    </a-form-item>
    <a-form-item>
      <a-input v-model:value="formData.phone" placeholder="请输入电话" style="width: 160px" allowClear />
    </a-form-item>
    <a-form-item>
      <a-button class="search" @click="search">查询</a-button>
      <a-button class="reset" @click="reset">重置</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
// import YardSelector from "@/views/reality-people/components/people-list/components/yard-selector";
const defaultFormData = {
  // yard_id: undefined,
  name: '',
  identity_num: '',
  phone: '',
};
export default {
  name: 'people-filter',
  // components: { YardSelector },
  data() {
    return {
      formData: Object.assign({}, defaultFormData),
    };
  },
  methods: {
    search() {
      this.$emit('update:modelValue', Object.assign({}, this.formData));
      this.$emit('input', Object.assign({}, this.formData));
    },
    reset() {
      this.formData = Object.assign({}, defaultFormData);
      this.$nextTick(() => this.search());
    },
  },
};
</script>

<style scoped lang="less">
.search {
  padding: 0 10px;
  background: rgba(66, 255, 255, 0.5);
  border: 2px solid rgba(132, 255, 237, 0.75);
  border-radius: 4px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
}

.reset {
  padding: 0 10px;
  background: linear-gradient(0deg, rgba(53, 76, 101, 0.4), rgba(29, 44, 60, 0.4));
  border-color: currentColor;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #6cccc3;
}
</style>
